import React, { useEffect, useState } from 'react';

//hooks
function ExampleEffect(){
    const [ count , setCount ] =useState(0)
    //异步的，提供生命周期函数解决的方法
    //组件解绑的操作，通过useEffect的回调函数componentWillUnmount
    useEffect(()=>{
        console.log(`useEffect => You Clicked ${count} times`)
    })
    return ( 
        <div>
            <p>You clicked {count} times</p>
             <button onClick={()=>{setCount(count + 1)}}>点击</button>
         </div>
     );
}

//原始
// class ExampleEffect extends Component {
//     constructor(props) {
//         super(props);
//         this.state = { count:0 }
//     }
//     componentDidMount(){
//         console.log('componentsDidMount ' + this.state.count )
//     }
//     componentDidUpdate(){
//         console.log('componentDidUpdate'  + this.state.count )
//     }
//     render() { 
//         return ( 
//             <div>
//                 <p>You clicked {this.state.count} times</p>
//                  <button onClick={this.addCount.bind(this)}>点击</button>
//              </div>
//          );
//     }
//     addCount(){
//         this.setState({count:this.state.count + 1})
//     }
// }
 
export default ExampleEffect;